<template>
  <el-dialog :title="title" :visible.sync="visible" :width="width" :close-on-click-modal='false' class="bonus">
    <el-row>
      <el-form :model="formData" ref="formRef" :label-width="labelWidth"  :rules="rules" v-loading="formLoading" :close-on-click-modal="false">
        <el-col :span="12">
          <el-form-item label="奖金项名称" prop="bonusItemName">
            <el-input v-model="formData.bonusItemName" autocomplete="off" placeholder="请输入奖金项名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="ECC奖金编号" prop="eccCode">
            <el-select v-model="formData.eccCode" placeholder="请选择ECC奖金编号" class="w100" clearable >
              <el-option
                v-for="item in eccCodeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="系统内奖金项编号" prop="bonusItemCode">
            <el-input v-model="formData.bonusItemCode" autocomplete="off" placeholder="请输入系统内奖金项编号" clearable disabled></el-input>
          </el-form-item>
        </el-col>
<!--        <el-col :span="12">
          <el-form-item label="奖金项时间"  prop="date" placeholder="请选择奖金项时间" clearable>
              <el-col :span="11">
                <el-date-picker type="date" placeholder="开始日期" value-format="yyyy-MM-dd" v-model="formData.bonusItemBegin" style="width: 100%;" ></el-date-picker>
              </el-col>
              <el-col  :span="2" class="text-center">-</el-col>
              <el-col :span="11">
                <el-date-picker placeholder="结束日期" value-format="yyyy-MM-dd" v-model="formData.bonusItemEnd" style="width: 100%;" ></el-date-picker>
              </el-col>
          </el-form-item>
        </el-col>-->
        <el-col :span="12">
          <el-form-item label="负责机构" prop="bonusItemDeptId">
            <el-select v-model="formData.bonusItemDeptId" placeholder="请选择负责机构" style="width: 100%" clearable  @change="changeBonusItemDeptId">
              <el-option
                v-for="item in bonusItemDeptIdOptions"
                :key="item.deptId"
                :label="item.name"
                :value="item.deptId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="奖金项范围" prop="bonusItemScope">
            <el-select v-model="formData.bonusItemScope" placeholder="请选择奖金项范围" style="width: 100%" clearable >
              <el-option
                v-for="item in bonusItemsScopeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item label="奖金项说明" >
             <el-input type="textarea"  :autosize="{ minRows: 3, maxRows: 4}" v-model="formData.bonusItemDescription" placeholder="请输入奖金项说明" clearable></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleCancel(false)">取消</el-button>
      <el-button type="primary"  @click="handleSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {addObj,putObj,getItemCode}  from '@/api/bonus/items' ;
import validateUtil from "@/api/bonus/utils";
import {getDic} from "@/api/bonus/common";

export default {
  name: "addForm",
  props:{
    bonusItemDeptIdOptions:{
      type:Array,
      default:[]
    },
    bonusItemsScopeOptions:{
      type:Array,
      default:[]
    }
  },
  data(){
    return{
      type:'add',
      formLoading:false,
      title:'新增',
      width:'50%',
      visible: false,
      labelWidth:'140px',
      formData: {bonusItemDeptId:'',bonusItemBegin:'', bonusItemEnd:''},
      rules: {
        bonusItemName: [{ required: true, message: '请输入奖金项名称', trigger: 'blur' },],
        eccCode: [{ required: true, message: '请输入ECC奖金编号', trigger: 'blur' }],
        date: [{ validator:validateUtil.beginAndEndTime,required: true, trigger: 'change',context:this}],
        bonusItemScope: [{ required: true, message: '请选择奖金项范围', trigger: 'change' }],
        bonusItemDeptId: [{ required: true, message: '请选择负责机构', trigger: 'change' }],
      },
      eccCodeOptions:[]
    }
  },
  methods:{
    init(type,data){
      this.type = type
      if (type == 'edit'){
        this.formData = data ;
        this.title = "编辑"
      }else{
        this.title = '新增'
        //获取系统内奖金项编号
        this.getItemCode()
      }
      this.visible = true ;

      //获取ECC编号字典
      this.getECCcodeDic() ;
    },
    getItemCode(){

      getItemCode().then(res=>{
        this.$set(this.formData,'bonusItemCode',res.data.data)
      }).catch(err=>{

      })
    },
    getECCcodeDic(){
      getDic('jingjinFenLei').then(res=>{
        this.eccCodeOptions = res.data.data
      }).catch(err=>{

      })
    },
    handleSubmit(){
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.formLoading = true ;
          if (this.type == 'add'){
            addObj(this.formData).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }else{
            putObj(this.formData).then(res=>{
              this.formLoading = false ;
              this.handleCancel(true) ;
            }).catch(()=>{
              this.formLoading = false ;
            })
          }

        } else {
          return false;
        }
      });
    },
    handleCancel(refresh){
      this.visible = false ;
      this.formData = {bonusItemDeptId:'',bonusItemBegin:'', bonusItemEnd:''} ;
      if (refresh){
        this.$emit('refresh')
      }
    },
    changeBonusItemDeptId(val){
      if (!val){
        this.$set(this.formData,'bonusItemDeptName','')
        return
      }
      this.bonusItemDeptIdOptions.map(item=>{
         if (item.deptId == val){
           this.$set(this.formData,'bonusItemDeptName',item.name)
         }
      })
    }
  }
}
</script>

<style scoped>

</style>
